<template>
  <b-container class="bv-example-row">
    <b-row>
      <b-col>
        <div id="List" class="mainpage">
          <!-- 面包导航开始 -->
          <el-row style="margin: 15px">
            <div class="breadcrumb">
              <el-col>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                  >
                  <el-breadcrumb-item :to="{ path: '/kegg' }"
                    >kegg接口</el-breadcrumb-item
                  >
                  <el-breadcrumb-item :to="{ path: '/list' }"
                    >list接口</el-breadcrumb-item
                  >
                </el-breadcrumb>
              </el-col>
            </div>
          </el-row>
          <!-- 面包导航结束 -->
          <el-row :gutter="10">
            <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
              <div class="grid-content bg-purple-light inpage">
                <el-row :gutter="10">
                  <el-col :span="6" :offset="2">
                    <div class="grid-content bg-purple-light">
                      <div class="block">
                        <el-row :gutter="10" style="margin-bottom: 20px">
                          <span
                            class="demonstration"
                            style="
                              font-family: 'Helvetica Neue', Helvetica,
                                'PingFang SC', 'Hiragino Sans GB',
                                'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
                              font-size: 18px;
                              font-color: blue;
                            "
                            >选择要下载的数据格式</span
                          >
                        </el-row>
                        <el-row :gutter="10" style="margin-bottom: 20px">
                          <el-cascader
                            v-model="value"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                          ></el-cascader>
                        </el-row>
                        <el-row :gutter="5">
                          <el-col :span="12">
                            <el-button type="primary" @click="readValue"
                              >预览内容</el-button
                            >
                          </el-col>
                          <el-col :span="12">
                            <el-button type="success" @click="downLoadExcel"
                              >下载文件</el-button
                            >
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6" :offset="6">
                    <div class="grid-content bg-purple">
                      <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        :disabled="canWrite"
                        v-model="textArea"
                      >
                      </el-input>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <div
                    style="
                      margin-left: 20px;
                      margin-right: 20px;
                      margin-top: 50px;
                      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    "
                  >
                    <template>
                      <el-table
                        :data="tableData"
                        height="500"
                        style="width: 100%"
                      >
                        <el-table-column prop="name" label="名字">
                        </el-table-column>
                        <el-table-column prop="description" label="描述">
                        </el-table-column>
                      </el-table>
                    </template>
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import kegg from "@/api/kegg";
export default {
  data() {
    return {
      tableData: [],
      textArea: "",
      value: [],
      options: [],
      canWrite: true,
      fileName: "",
    };
  },
  created() {
    this.getKeggList();
  },
  methods: {
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      return _this.gettime;
    },
    handleChange(value) {
      if (value[1] == "entry") {
        this.canWrite = false;
      } else {
        this.canWrite = true;
        this.textArea = "";
      }
    },
    getKeggList() {
      kegg.getList().then((response) => {
        //读取信息进入数据格式列表
        this.options = response.data.data.optionslist;
      });
    },
    isBadResponse(response) {
      if (response.data.success == true) {
        return true;
      } else {
        return false;
      }
    },
    readValue() {
      length = this.value.length;
      let dataList = {};
      if (length < 2) {
        alert("请输入参数");
      } else {
        if (length < 3 && length >= 2) {
          if (this.textArea != "") {
            dataList = {
              operation: this.value[0],
              arg1: this.value[1],
              textArea: this.textArea,
            };
          } else {
            dataList = { operation: this.value[0], arg1: this.value[1] };
          }
        } else {
          dataList = {
            operation: this.value[0],
            arg1: this.value[1],
            arg2: this.value[2],
          };
        }
        kegg.viewData(dataList).then((response) => {
          if (this.isBadResponse(response)) {
            //读取信息进入数据格式列表
            this.tableData = response.data.data.viewlist;
          } else {
            this.$message({
              message: response.data.data.entry + "无法被识别",
              type: "warning",
            });
          }
        });
      }
    },
    downLoadExcel() {
      let _this = this;
      length = this.value.length;
      let dataList = {};
      if (length < 2) {
        alert("请输入参数");
      } else {
        if (length < 3 && length >= 2) {
          if (this.textArea != "") {
            dataList = {
              operation: this.value[0],
              arg1: this.value[1],
              textArea: this.textArea,
            };
          } else {
            dataList = { operation: this.value[0], arg1: this.value[1] };
          }
        } else {
          dataList = {
            operation: this.value[0],
            arg1: this.value[1],
            arg2: this.value[2],
          };
        }
        this.fileName = this.value[0] + "_" + this.value[1];
        let lastM = this.getCurrentTime();

        if (this.value[2]) {
          this.fileName += "_" + this.value[2] + "_" + lastM + ".xlsx";
        } else {
          this.fileName += "_" + lastM + ".xlsx";
        }
        kegg
          .downLoadData(dataList)
          .then((res) => {
            if (!res) return;
            const blob = new Blob([res.data], {
              type: "vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            }); // 构造一个blob对象来处理数据，并设置文件类型

            if (window.navigator.msSaveOrOpenBlob) {
              //兼容IE10
              navigator.msSaveBlob(blob, this.fileName);
            } else {
              const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
              const a = document.createElement("a"); //创建a标签
              a.style.display = "none";
              a.href = href; // 指定下载链接
              a.download = this.fileName; //指定下载文件名
              a.click(); //触发下载
              URL.revokeObjectURL(a.href); //释放URL对象
            }
            // 这里也可以不创建a链接，直接window.open(href)也能下载
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "warning",
            });
          });
      }
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}

.inpage {
  margin-bottom: 0px;
  min-height: 800px;
  padding-top: 50px;
}
</style>